import React, { useEffect,useState } from 'react'
import { Toast,Modal } from 'antd-mobile'

import Navbar from '../../components/Navbar'
import HouseList from '../../components/HouseList'
import { reqCollectedList } from '../../api'

import './index.scss'

const alert=Modal.alert

export default function Collected(props) {
  const {history}=props //获取路由的history

  const [list, setList] = useState(null)  //收藏列表数据

  useEffect(()=>{
    async function getList(){ //获取收藏列表
      Toast.loading('正在加载...',0)
      let res=await reqCollectedList()
      if(res.status===400){
        alert('提示',res.description,[
          {text:'取消',onPress:history.goBack()},
          {text:<span style={{color:'#2caf87'}}>登录</span>,onPress:()=>history.push('/login')},
        ])
      }
      setList(res.body) //设置收藏列表数据
      Toast.hide()
    }
    if(!list)getList()  //数据为空的时候再获取数据
  },[list,history])

  return (
    <div>
      <div className='collected-navbar'>
        <Navbar title='我的收藏'></Navbar>
      </div>
      <div className='collected-list'>
        <HouseList list={list} history={history}></HouseList>
      </div>
    </div>
  )
}
